@color: red;
header {
  height: 30px;
  font-size: 14px;
  background-color: pink;
  border-bottom: 1px solid rgb(225, 224, 224);
  // 头部上导航
  > .header-nav {
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #999;
    background-color: rgb(235, 233, 233);
    // 导航
    > .nav {
      display: flex;
      justify-content: space-between;
      // 头部上导航左边
      > .nav-left {
        > ul li {
          padding: 0 5px;
          position: relative;
          > img {
            height: 20px;
            cursor: pointer;
          }
          a{color: rgb(93, 92, 92);}
          > .nav-left-second {
            padding: 20px;
            width: 320px;
            height: 460px;
            background-color: #fff;
            position: absolute;
            z-index: 2;
            top: 30px;
            left: 0;
            display: none;
            > div {
              border-bottom: 1px solid #ccc;
              display: flex;
              flex-wrap: wrap;
              > span {
                // background-color: red;
                width: 20%;
                cursor: pointer;
              }
              > span:hover {
                color: @color;
              }
            }
          }
        }
        // 设置左边二级导航栏
        ul li:hover {
          background-color: #fff;
        }
        li:hover a {
          color: @color;
        }
        li:hover div {
          display: block;
        }
      }
      // 头部上面右边导航
      > .nav-right > ul {
        width: 778px;
        // height: 30px;
        display: flex;
        justify-content: space-around;
        // background-color: aqua;
        // 右边一级导航的li
        > li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 8px;
          a{
           color: rgb(93, 92, 92);
          }
          > .active {
            color: @color;
          }
          > p:hover a {
            color: @color;
          }

        }
        // 设置右边导航的二级导航
        // 设置我的京东的二级导航
        > .my-jd {
          position: relative;
          
          > div {
            position: absolute;
            z-index: 2;
            top: 30px;
            left: 0;
            width: 260px;
            height: 160px;
            display: none;
            background-color: #fff;
            >p {
              display: flex;
              flex-wrap: wrap;
              span {
                width: 50%;
                cursor: pointer;
              }
              span:hover {
                color: @color;
              }
            }
           >p:nth-of-type(1){
            border-bottom: 1px solid #ccc;
           }
          }
          
        }
        // 设置企业采购的二级导航
        > .qeb {
          position: relative;
          > div {
            position: absolute;
            z-index: 2;
            top: 30px;
            left: 0;
            box-sizing: border-box;
            width: 150px;
            height: 140px;
            padding: 5px;
            background-color: #fff;
            display: none;
            p {
              display: flex;
              flex-wrap: wrap;
              span {
                text-align: left;
                width: 50%;
                line-height: 25px;
                font-size: 14px;
              }
              span:nth-last-of-type(1) {
                width: 100%;
              }
              span:hover {
                color: @color;
                cursor: pointer;
              }
            }
          }
        }
        // 设置客户服务的二级导航栏
        > .service {
          position: relative;
          > div {
            position: absolute;
            z-index: 2;
            top: 30px;
            right: 0;
            width: 170px;
            height: 270px;
            display: none;
            background-color: #fff;
            dl {
              display: flex;
              flex-wrap: wrap;
              font-size: 14px;
              line-height: 25px;
              border-bottom: 1px dotted #ccc;
              // justify-content: space-around;
              dt {
                width: 100%;
                color: black;
                text-align: left;
                padding-left: 10px;
              }
              dd {
                text-align: left;
                width: 50%;
                box-sizing: border-box;
                padding-left: 10px;
                cursor: pointer;
              }
              dd:hover {
                color: @color;
              }
            }
            dl:nth-last-of-type(1) {
              border: 0;
            }
          }
        }
        // 设置网站导航的二级导航
        > .map {
          position: relative;
          > div {
            position: absolute;
            z-index: 2;
            top: 30px;
            right: 0px;
            line-height: 20px;
            width: 1103px;
            height: 180px;
            display: flex;
            display: none;

            background-color: #fff;
            dl {
              text-align: left;
              padding: 10px 20px;

              display: flex;

              flex-wrap: wrap;
              justify-content: space-between;
              flex: 1;
              font-size: 14px;
              border-right: 1px dotted #ccc;
              dt {
                width: 100%;
                color: rgb(49, 49, 49);
              }
              dd {
                width: 30%;
                cursor: pointer;
              }
              dd:hover {
                color: @color;
              }
            }
            dl:nth-of-type(1) > dd {
              width: 25%;
            }
          }
        }
        > .phon-jd {
          position: relative;
          > div {
            position: absolute;
            z-index: 2;
            top: 30px;
            right: 0;
            width: 210px;
            height: 500px;
            display: none;
            background-color: #fff;
            > ul {
              flex-direction: column;
              width: 190px;
              height: 500px;
              li {
                width: 100%;
                height: 20%;
                padding: 10px;
                display: flex;
                border-bottom: 1px solid #ccc;
                div {
                  width: 50%;
                  font-size: 12px;
                  line-height: 20px;
                  padding-left: 5px;
                  height: 100%;
                  
                  img {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
        // 给我的京东设置hover效果
        .my-jd:hover {
          background-color: #fff;
        }
        .my-jd:hover div {
          display: block;
        }
        // 给企业采购设置hover效果
        .qeb:hover {
          background-color: #fff;
        }
        .qeb:hover div {
          display: block;
        }

        // 给客服服务设置hover效果
        .service:hover {
          background-color: #fff;
        }
        .service:hover div {
          display: block;
        }
        // 给网站导购设置hover效果
        .map:hover {
          background-color: #fff;
        }
        // 给手机京东设置hover效果
        .phon-jd:hover{
          background-color: #fff;
        }
        .phon-jd:hover div{
          display: block;
        }
        .map:hover div {
          display: block;
          display: flex;
        }
      }
    }
  }
}
